<template>
  <div>
    <h3>{{ username }}</h3>
    <child></child>
  </div>
</template>

<script>
import child from '@/components/child.vue'

export default {
  components: {
    child
  },
  // provide和inject它传入的数据不是响应式的，但是如果你的数据响应式的，它还可以是响应式
  // 但是发布 和 注入 方式，一般在自定义高级组件时使用，一般都是从父向下传入，给子孙组件所用，子孙组件一般不太需要去通知祖先组件中的数据要改变什么。
  
  // 如果为对象的方法，则无法调用data中的数据
  /* provide: {
    username: '李四'
  }, */
  // 函数的方式，可以读取data中的数据
  provide() {
    return {
      // 如果你这样传入响应式数据，在注入的地方，则它就不响应
      // username:this.username,
      // 如果为函数的方法传入，则它还保持着响应式,它当时没有执行，在执行的时候，它会再次获取一次
      username: () => this.username,
      setusername: this.setname
    }
  },
  data() {
    return {
      username: '张三'
    }
  },
  methods: {
    setname() {
      // console.log(this)
      this.username = Date.now()
      // 强刷新
      // this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss"></style>
